<!-- Hazert 2016/06/08 -->
<!-- Test_FYP is the draft version for the FYP -->
<!-- ResultPage.jsp is show search result to user -->
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- There are two link and script used to connect with Bootstrap -->
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>

<title>Result Page</title>
</head>

<!-- JS -->
<!-- Record Image Click Times -->
<script defer="defer">
    var x=0;
    function checkRight(){
         x=x+1;
         document.getElementById('ClickTimes').innerHTML = x;
    }
</script>


<body>
<!-- Result page Top menu bar -->
<nav class="navbar navbar-inverse navbar navbar-default navbar-static-top">
<form class="navbar-form navbar-left" role="search">
  <div class="form-group container">
    <img class="bar-logo" src="../image/Logo.png"></img>
    <input type="text" class="form-control" placeholder="Search">
    <button type="submit" class="btn btn-default">Search</button>
  </div>
</form>
</nav>

<!-- This div is used to show different tags -->
<div class="TagBar">

<button type="button" class="btn btn-primary">Cat</button>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<button type="button" class="btn btn-success">Leopard</button>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<button type="button" class="btn btn-info">Lion</button>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<button type="button" class="btn btn-warning">ackals</button>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<button type="button" class="btn btn-danger">Tiger</button>

</div>

<!-- This div is used to show the search result to user -->
<div class="container-fluid">
  <div class="row">
  
   <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img style="height:200px; wight:200px" src="../image/ResultImage/test1.jpg" alt="..." onclick="checkRight()">
    </a>
  </div>
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img style="height:200px; wight:200px" src="../image/ResultImage/test2.jpg" alt="...">
    </a>
  </div>
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img style="height:200px; wight:200px" src="../image/ResultImage/test3.jpg" alt="...">
    </a>
  </div>
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img style="height:200px; wight:200px" src="../image/ResultImage/test4.jpg" alt="...">
    </a>
  </div>
   <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img style="height:200px; wight:200px" src="../image/ResultImage/test5.jpg" alt="..." onclick="checkRight()">
    </a>
  </div>
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img style="height:200px; wight:200px" src="../image/ResultImage/test6.jpg" alt="...">
    </a>
  </div>
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img style="height:200px; wight:200px" src="../image/ResultImage/test7.jpg" alt="...">
    </a>
  </div>
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img style="height:200px; wight:200px" src="../image/ResultImage/test8.jpg" alt="...">
    </a>
  </div>
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img style="height:200px; wight:200px" src="../image/ResultImage/test9.jpg" alt="...">
    </a>
  </div>
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img style="height:200px; wight:200px" src="../image/ResultImage/test10.jpg" alt="...">
    </a>
  </div>
  
  </div>
</div>

Image ClickTimes: <span id="ClickTimes"></span>

</body>

</html>